{% extends 'base.html' %}
{% block title %}
    <title>{{ post.title }}_{{ post.category }}_追梦人物的博客</title>
{% endblock title %}
{% block main %}
    <div class="toc-button hidden-lg"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
    <div class="side-bar">
        <div class="toc-wrapper">
            <h3>目录</h3>
            <ul class="toc">

            </ul>
        </div>
    </div>
    <!-- single-blog-area start -->
    <div class="col-md-8 col-sm-12">
        <div class="single-blog-details">
            <span class="tag"><a href="{% url 'blog:in_category' post.category.slug %}">{{ post.category }}</a></span>
            <h1 class="post-title">{{ post.title }}</h1>
            <p class="post-date">发表于 {{ post.pub_date|date }}</p>
            <div class="post-long-desc">
                {% if post.lead %}
                    <blockquote>
                        {{ post.lead_html }}
                    </blockquote>
                {% endif %}
                {{ post.body_html }}
                <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/cn/"><img alt="知识共享许可协议"
                                                                                                  style="border-width:0"
                                                                                                  src="https://i.creativecommons.org/l/by-nc-nd/3.0/cn/80x15.png"/></a><br/>本作品采用<a
                    rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/cn/">知识共享署名-非商业性使用-禁止演绎 3.0
                中国大陆许可协议</a>进行许可。
                <div>本作品首发于<a href="http://zmrenwu.com">追梦人物的博客 - 探索 Python、分享 Python</a>，转载务必注明出处。</div>
                <div>本作品永久链接：<a href="http://{{ request.get_host }}{{ post.get_absolute_url }}">
                    http://{{ request.get_host }}{{ post.get_absolute_url }}</a></div>
            </div>
            <div class="single-blog-bottom fix">
                <div class="post-social-links pull-left">
                    <p>
                        <span class="lbl">分享到&nbsp;&nbsp;-</span>
                        <span>
                            <a href="#"><i class="fa fa-weibo" aria-hidden="true"></i></a>
                            <a href="#"><i class="fa fa-weixin" aria-hidden="true"></i></a>
                            <a href="#"><i class="fa fa-qq" aria-hidden="true"></i></a>
                        </span>
                    </p>
                </div>
                <div class="post-tags pull-right">
                    <p>
                        <span class="lbl">标签&nbsp;&nbsp;-</span>
                        <span>
                            {% for tag in post.tags.all %}
                                <a href="{% url 'blog:in_tag' tag.slug %}" title="" class="">{{ tag.name }}
                                    {% if not forloop.last %}、{% endif %}</a>
                            {% empty %}
                                暂无标签
                            {% endfor %}
                        </span>
                    </p>
                </div>
            </div>
            <hr>
            <div class="" id="comment-area">
                {% include 'comments/list.html' %}
            </div><!-- /.comments-area -->
        </div><!-- /.single-blog-details -->
    </div>
    <!-- single-blog-area end -->
{% endblock main %}
{% block aside %}
    <div class="col-md-4 col-md-offset-0 col-sm-8 col-sm-offset-2">
        <div class="sidebar-area fix">
            <div class="single-sidebar-widget">
                <h6 class="widget-title">目录</h6>
                <div class="sidebar-content">
                    <div class="toc" id="toc">
                    </div>
                </div><!-- /.sidebar-content -->
            </div><!-- /.single-sidebar-widget -->
        </div><!-- /.sidebar-area -->
    </div>
{% endblock aside %}
{% block script %}
    <script>
        $(function () {
            var contents;
            contents = gajus.Contents({
                articles: $('.post-long-desc').find('h1, h2, h3').get()
            });
            $('.toc').append(contents.list());

            $tocbutton = $('.toc-button');
            $tocbutton.click(function () {
                if ($tocbutton.css('left') == '0px') {
                    $('.side-bar').animate({
                        left: '0px'
                    });
                    $tocbutton.animate({
                        left: '250'
                    });
                    $('.toc-button > i').removeClass('fa fa-chevron-right').addClass('fa fa-chevron-left');
                } else {
                    $('.side-bar').animate({
                        left: '-250'
                    });
                    $tocbutton.animate({
                        left: '0'
                    });
                    $('.toc-button > i').removeClass('fa fa-chevron-left').addClass('fa fa-chevron-right');
                }
            })
        });
    </script>
{% endblock script %}